<%--
  Created by IntelliJ IDEA.
  User: Administrator
  Date: 2021/11/1
  Time: 15:11
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib prefix="fun" uri="http://java.sun.com/jsp/jstl/functions" %>
<html>
<head>
    <title>评论</title>
    <script src="${pageContext.request.contextPath}/resources/js/jquery-1.10.1.min.js"></script>
</head>
<body>
<style>
    .pl {
        width: 100%;
        height: 75px;
        text-align: center;
        background: #f2f2f2;
        /*line-height: 50px;*/
    }

    .img-circle {
        width: 35px;
        height: 35px;
        border-radius:50%;
    }
    .tx{
        width: 50px;
    }
    .comment{
        width: 400px;
    }
    a{
        text-decoration: none;
    }
</style>
<form action="${pageContext.request.contextPath}/chapterComments/comments/${id}/comment" >

    <div style="height: 75px">
        <div id="pl" class="pl" >
            <div>
                <textarea id="newComment" placeholder="留一条评论吧" style="resize:none;width:600px;height:50px;" maxlength="100" name="newComment" ></textarea>
            </div>
            <div>
                <input type="submit" value="发布评论" onclick="return isNull();">
                <br>
            </div>
        </div>
    </div>
           <table align="center" width="500px">
               <tr>
                   <td>
                       <c:forEach items="${comments}" var="chapterCommentsVo">
                           <div id="commont_div_${chapterCommentsVo.comments.id}">
                           <table>
                               <tr>
                                   <td class="tx">
                                       <a href="${pageContext.request.contextPath}/sys/user/person/home">
                                           <img src="http://192.168.2.149:9000/${chapterCommentsVo.pic}" alt="头像"
                                                border="1" class="img-circle img-thumbnail" >
                                       </a>
                                   </td>
                                   <td>
                                       <font size="5">${chapterCommentsVo.nick}</font>
                                       <font size="1" color="grey">${fun:replace(chapterCommentsVo.comments.commentTime, "T", " ") }</font>
                                   </td>
                               </tr>
                               <tr>
                                   <td></td>
                                   <td class="comment">
                                       <div align="left">${chapterCommentsVo.comments.comment}</div>
                                   </td>
                               </tr>
                               <c:if test="${identity eq 1}" >
                                   <tr>
                                       <td></td>
                                       <td></td>
                                       <td align="right">
                                               <input type="button" onclick="del1(this, ${chapterCommentsVo.comments.id})" value="删除评论">
                                       </td>
                                   </tr>
                               </c:if>
                               <c:if test="${identity ne 1}" >
                                   <c:if test="${identity eq chapterCommentsVo.comments.userId}">
                                       <tr>
                                           <td></td>
                                           <td></td>
                                           <td align="right">
                                               <input type="button" onclick="del1(this, ${chapterCommentsVo.comments.id})" value="删除评论">
                                           </td>
                                       </tr>
                                   </c:if>
                               </c:if>
                       </table>
                           <hr width="500px" align="left" />
                           </div>
                       </c:forEach>
                   </td>
               </tr>
           </table>
    <div style="height: 75px"></div>

</form>

</body>
<script>
    var tt = pl.offsetTop;
    window.onscroll = function() {
        var t = document.documentElement.scrollTop || document.body.scrollTop;
        if(t > tt) {
            pl.style.position = "fixed";
            Element = document.styleSheets[0].cssRules[0].style;
            Element.removeProperty("Top");
            pl.style.bottom = 0;
        } else if(t < tt) {
            pl.removeAttribute("style");
            //pl.style.position = "absolute";
        } else {
            return false;
        }
    }
    var getStyle = function(dom, attr) {
        return dom.currentStyle ? dom.currentStyle[attr] : getComputedStyle(dom, false)[attr];
    }

    function isNull(){
        var comment = document.getElementById("newComment").value;
        if (comment === ""){
            alert("评论内容不能为空！");
            return false;
        }
    }

    function del1(obj, commentId){
        // console.log(obj.parentNode.parentNode.parentNode.textContent);
        // var tb = obj.parentNode.parentNode.parentNode.parentNode;
        // tb.parentNode.removeChild(tb);

        $('#commont_div_'+commentId).remove();

        $.get("${pageContext.request.contextPath}/chapterComments/comments/" + commentId + "/delcomment");
    }
    function del2(obj, commentId){
        // console.log(obj.parentNode.parentNode.parentNode.textContent);
        // var tb = obj.parentNode.parentNode.parentNode.parentNode;
        // tb.parentNode.removeChild(tb);

        $('#commont_div_'+commentId).remove();

        $.get("${pageContext.request.contextPath}/chapterComments/comments/" + commentId + "/delcomment");
    }
</script>
</html>
